<template>
   <div>
    <h1>请选择您喜欢的专栏</h1>
    <span  v-for="item in list" :key="item"  :style="{fontSize:'20px'}">
      <input type="checkbox" v-model="hdd" :value="item" @change="addFn">{{item}}
    </span>
    <br>
    <h3 :style="{fontSize:'20px'}" >我喜欢的栏目有：{{ render}}</h3>
   </div>
</template>

<script>
export default {
    data(){
      return{
        list:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
        hdd:[],
        render:''
      }
    },
     methods:{
      addFn(){
        this.render = this.hdd.join(',')
      }
    }
}
</script>

<style>

</style>